<template>
	<view class="outermaster" v-if="userTeam.length">
		<view class="mine-team">我的签约团队</view>
		<!-- 卡片 -->
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
			<view style="display: inline-block;" v-for="item in userTeam">
				<view class="team-card">
					<view class="team-image">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="team-name">{{item.name}}</view>
					<view class="team-doctor">团队长：{{item.leaderId.name}} 签约医生：{{item.doctorId.name}}</view>
					<view class="apply-service">
						<text @click="applyService(item._id)">申请服务</text>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useUserStore
	} from '../../store/user';
	import {
		getByResidentIdApi
	} from '../../api/home';
	// const props = defineProps['data']
	// console.log(props.data);
	const userStore = useUserStore()
	// 保存签约团队的数据
	const userTeam = ref([])
	onMounted(() => {
		// console.log(userStore.userInfo?._id);
		findData()
	})
	// 获取用户签约的详情
	const findData = () => {
		// const _id = userStore.userInfo._id
		getByResidentIdApi({
				residentId: userStore.userInfo?._id
			})
			.then(res => {
				if (res.code == 200) {
					// console.log('团队数据', res.data);
					userTeam.value = res.data
				}
			})
	}
	// 将这个数组暴露给父组件
	defineExpose({
		userTeam
	})

	// 申请服务
	function applyService(data) {
		uni.navigateTo({
			url: `/minePackage/pages/Team-of-doctors/Team-of-doctors?_id=${data}`
		})
	}
</script>

<style scoped lang="scss">
	.outermaster {
		padding: 0 32rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.mine-team {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		font-size: 40rpx;
		color: #333333;
	}

	.team-card {
		width: 670rpx;
		height: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		border: 1rpx solid #E4EBF4;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #f3f3f3;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		margin-right: 30rpx;
	}

	.team-image {
		margin: 40rpx 0;

		image {
			width: 220rpx;
			height: 220rpx;
		}
	}

	.team-name {
		font-size: 40rpx;
		color: #333333;
	}

	.team-doctor {
		font-size: 28rpx;
		color: #999999;
		margin: 30rpx 0;
	}

	.apply-service {
		width: 200rpx;
		height: 80rpx;
		background-color: #2984F8;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 28rpx;
			color: #ffffff;
		}
	}
</style>